<template>
  <el-dialog
    width="900px"
    :title="formData.groupName"
    destroy-on-close
    append-to-body
    :visible.sync="show"
    :before-close="cancel">
    <div style="display: flex; width: 100%">
      <el-card style="flex: 1">
        <div style="font-weight: bold; margin: 10px 0">已选择卖家</div>
        <el-table
          @selection-change="(rows) => (tableCheckLeft = rows)"
          :height="calTableHeight() - 200"
          :data="tableDataLeft"
          ref="multipleTables">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="distrName"
            :label="$t('卖家租户名')"
            :show-overflow-tooltip="true" />
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="responsibleUser"
            :label="$t('负责人')"
            :show-overflow-tooltip="true" />
        </el-table>
      </el-card>
      <div
        style="
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin: 0 50px;
        ">
        <i @click="relaodCheckDataToright" class="el-icon-right" style="font-size: 80px; cursor: pointer"></i
        ><i @click="relaodCheckDataToleft" class="el-icon-back" style="font-size: 80px; cursor: pointer"></i>
      </div>
      <el-card style="flex: 1">
        <div style="font-weight: bold; margin: 10px 0">未选择卖家</div>
        <el-table
          @selection-change="(rows) => (tableCheckRight = rows)"
          :height="calTableHeight() - 200"
          :data="tableDataRight"
          ref="multipleTables">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="distrName"
            :label="$t('卖家租户名')"
            :show-overflow-tooltip="true" />
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="responsibleUser"
            :label="$t('负责人')"></el-table-column>
        </el-table>
      </el-card>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleSubmit" type="primary">
        {{ $t('确定') }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  getCloudGroupSellerListNot,
  getCloudGroupSellerListIs,
  removeSkuCloudGroupSeller,
  setSkuCloudGroupSeller 
} from '@/api/distribution/sku/assemblyList'
export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  props: {
    /**
     * formData
     */
    formData: {
      type: Object,
      default: {},
    },
    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      tableDataLeft: [],
      tableDataRight: [],
      tableCheckLeft: [],
      tableCheckRight: [],
      form: {},
      // 表单校验
      rules: {},
    }
  },
  computed: {},
  watch: {
    show: function (newValue) {
      if (newValue) {
        this.getList()
      }
    },
  },

  methods: {
    relaodCheckDataToright() {
        const sellerIdList = this.tableCheckLeft.map((i) => i.distrId)
        removeSkuCloudGroupSeller({ groupId: this.formData.id, sellerIdList }).then(
        (res) => {
          this.getList()
        },
      )
    },
    relaodCheckDataToleft() {
        const sellerIdList = this.tableCheckRight.map((i) => i.distrId)
      setSkuCloudGroupSeller({ groupId: this.formData.id, sellerIdList}).then(
        (res) => {
          this.getList()
        },
      )
    },
    getList() {
      getCloudGroupSellerListIs({ groupId: this.formData.id }).then((res) => {
        this.tableDataLeft = res.data
      })
      getCloudGroupSellerListNot({ groupId: this.formData.id }).then((res) => {
        this.tableDataRight = res.data
      })
    },
    cancel() {
      this.$emit('update:show', false)
    },
    handleSubmit() {
      this.$emit('getList')
      this.$emit('update:show', false)
    },
  },
}
</script>
<style scoped lang="scss"></style>
